<template>
	<view class="collections">
		<TopNav :leftArrow="false" rightBtn @click="$refs.popup.open()" />
		<view class="title_h1">{{ title }}</view>
		<view class="amount">{{ amount }} photos</view>
		<view class="edit_box">
			<view>
				<view class="edit_btn" @click="goEdit">
					<uni-icons type="settings-filled" size="60rpx"></uni-icons>
				</view>
				<view class="edit_text">编辑</view>
			</view>
		</view>
		<view class="waterfallsFlow">
			<waterfallsFlow
				ref="waterfallsFlow"
				imageSrcKey="small_url"
				:single="true"
				:list="folder.assets"
				:cols="2"
				@image-click="handleImg"
			/>
			<view class="loading" v-if="loading"><u-loading-icon></u-loading-icon></view>
		</view>

		<view class="popup">
			<uni-popup ref="popup" type="bottom" :safe-area="false">
				<view class="popup-box">
					<view class="title">选项</view>
					<view class="option-list">
						<view class="option" v-for="(item, index) in optionList" :key="index" @click="goPage">
							{{ item }}
						</view>
					</view>
					<view class="popup-btn"><view class="close-btn" @click="$refs.popup.close()">关闭</view></view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import api from '@/common/api.js';
import waterfallsFlow from '@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue';
import TopNav from '@/components/TopNav/TopNav.vue';
export default {
	components: {
		waterfallsFlow,
		TopNav
	},
	props: {},
	data() {
		return {
			title: '',
			amount: 0,
			folder: {},
			list: [],
			proUrl: 'https://api.protograph.cn/', // 正式服地址
			refresh: true,
			optionList: ['编辑收藏夹'],
			loading: false,
			folderId: '' // 收藏夹id
		};
	},
	onLoad(option) {
		this.folderId = option.folderId;
		this.getCollections(option.folderId);
	},
	onPullDownRefresh() {
		this.$refs.waterfallsFlow.refresh();
		this.folder.assets = [];
		this.getCollections(this.folderId);
	},
	onShow() {
		uni.$off('editCollection');
		uni.$off('editFolder');
		uni.$on('editCollection', data => {
			if (data.isDel) {
				this.getCollections(this.folderId);
			}
		});
		uni.$on('editFolder', data => {
			this.$refs.popup.close();
			this.title = data.name;
		});
	},
	methods: {
		// 获取收藏夹图片列表
		async getCollections(folder_id) {
			let tokenString = uni.getStorageSync('access_token');
			if (!tokenString) {
				return false;
			}
			this.loading = true;
			try {
				let res = await this.$ajax({
					url: api.favorite_assets,
					data: {
						folder_id
					},
					header: {
						Authorization: 'Bearer ' + tokenString
					}
				});
				// console.log('收藏夹图片列表 ==>', res);
				if (res.statusCode == 200) {
					let data = res.data.data[0];
					data.assets.forEach((item, index) => {
						item.small_url = this.$baseURL + item.small_url;
						item.big_url = this.$baseURL + item.big_url;
					});
					this.title = data.name;
					this.amount = data.amount;
					this.folder = data;
					this.loading = false;
				} else {
					this.loading = false;
				}
				uni.stopPullDownRefresh();
			} catch (e) {
				this.loading = false;
				uni.stopPullDownRefresh();
				console.log(e);
			}
		},

		// 跳转到编辑页
		goEdit() {
			setTimeout(() => {
				uni.$emit('getAssets', this.folder.assets);
			}, 500);
			uni.navigateTo({
				url: `../collectionsEdit/collectionsEdit?folderId=${this.folder.id}`
			});
		},

		// 点击图片到图片详情
		handleImg(e) {
			// console.log('item ==>', e.item);
			let list = this.folder.assets.slice(e.item.index - 5 < 0 ? 0 : e.item.index - 5, e.item.index + 5);
			// console.log('123 ==>', list);
			let active = 0;
			list.forEach((item, index) => {
				if (item.id == e.item.id) {
					active = index;
				}
			});
			uni.navigateTo({
				url: `../../components/ImageDetail2/ImageDetail2?active=${active}`,
				animationType: 'slide-out-right',
				success: res => {
					res.eventChannel.emit('handleImg', { imgData: e.item, imgList: list });
				}
			});
		},

		goPage() {
			uni.navigateTo({
				url: `../favoritesEdit/favoritesEdit?fId=${this.folder.id}&fName=${this.title}`
			});
		}
	}
};
</script>

<style lang="scss">
.collections {
	.title_h1 {
		font-size: 60rpx;
		font-weight: bold;
		color: #111;
		letter-spacing: 8rpx;
		text-align: center;
		margin-bottom: 20rpx;
		// margin: 40rpx 0 80rpx;
	}
	.amount {
		font-size: 32rpx;
		color: #111111;
		text-align: center;
	}
	.waterfallsFlow {
		padding: 20rpx;
	}
	.edit_box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40rpx 0;
	}
	.edit_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 144rpx;
		height: 144rpx;
		border-radius: 48rpx;
		background-color: #efefef;
		margin-bottom: 10rpx;
	}
	.edit_text {
		text-align: center;
		word-wrap: break-word;
		font-size: 24rpx;
		font-weight: 700;
		color: #111;
	}

	.popup-box {
		padding: 60rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		.title {
			font-size: 32rpx;
			margin-bottom: 50rpx;
		}
		.option {
			font-size: 40rpx;
			letter-spacing: 2rpx;
			margin-bottom: 50rpx;
			text-shadow: 0px 0px #111;
		}
		.popup-btn {
			display: flex;
			justify-content: center;
			margin-top: 80rpx;
		}
		.close-btn {
			width: 130rpx;
			height: 110rpx;
			text-align: center;
			line-height: 110rpx;
			border-radius: 60rpx;
			background-color: #efefef;
		}
	}
}
</style>
